<template>
  <div class="pagination">
    <button @click="changePageNo(pageNo - 1)">上一页</button>
    <button v-show="startAndEnd.start > 1" @click="changePageNo(1)">1</button>
    <span v-show="startAndEnd.start > 2">...</span>
    <!-- 起始页 -->
    <button v-for="(_, index) in (startAndEnd.end - startAndEnd.start + 1)" :key="_"
      :class="{ active: index + startAndEnd.start === pageNo }" @click="changePageNo(index + startAndEnd.start)">{{ index
          + startAndEnd.start
      }}</button>

    <!-- 结束页 -->
    <button v-show="startAndEnd.end < totalPage - 1" @click="changePageNo(pageNo + 1)">···</button>

    <button v-show="startAndEnd.end < totalPage" @click="changePageNo(totalPage)">总页数:{{ totalPage }}</button>
    <button  @click="changePageNo(pageNo+1)" :disabled="pageNo===totalPage">下一页</button>

    <span>共数{{ total }} 条</span>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    //传过来的总数
    total: {
      //类型必须是数值
      type: Number,
      //如果父组件没传值过来总数默认为1
      default: 1
    },
    //传过来的当前是在第几页
    pageNo: {
      //类型必须是数值
      type: Number,
      //如果父组件没传值过来当前默认的页数为1
      default: 1
    },
    //传过来的一页要显示几条
    pageSize: {
      //类型必须是数值
      type: Number,
      //如果父组件没传值过来默认每页显示一条
      default: 1
    },
    //传过来的连续数
    continues: {
      //类型必须是数值
      type: Number,
      //如果父组件没传值过来连续数默认为3
      default: 3
    },
    // 给父组件传参
    changePageNo: {
      type: Function,
      default: () => { }
    }

  },
  computed: {
    // 计算总页码，就是通过总数据除以每页显示多少条，然后会被分成多少页,这里得出了分多少页的值
    totalPage() {
      // 1.先拿到一共有多少总数和每页多少条
      const { total, pageSize } = this
      // 2. 拿总数除以每页多少条得出分多少页，一条也要分一页，所以想上取整
      //Math.ceil()数字有小数就向上取整
      return Math.ceil(total / pageSize)
    },
    //计算从多少页开始显示和多少页结束的值

    startAndEnd() {
      // 1.先拿到当前显示的是在第几页，和连续页数
      const { pageNo, continues } = this
      //2.定义两个变量用来储存起始页和结束页的值
      let start, end

      //因为起始页不能为1所以得做个判断
      //如果连续的页数大于了总共要分多少页
      if (continues > this.totalPage) {
        //那么起始页就为1，因为起始页不能是负数
        start = 1
        //结束页就为连续多少页的值
        end = continues
      } else {
        // 3.起始页的值等于当前显示的是第几页减去连续页的二分之一向下取整,如当前是第五页的话起始页就是第三页，用为分页器要连续展示5条数据那么起始页
        start = pageNo - parseInt(continues / 2)
        // 4.结束页，因为当前页一般在连续页的中间为了好看，所以就能通过当前页推出起始页和结束页的值
        end = pageNo + parseInt(continues / 2)
      }
      if (start < 1) {
        start = 1
        end = continues
      }
      //还有结束页不能大于总页数的情况
      // 所以如果结束页大于了总页数，那么结束就是总页数的值

      if (end > this.totalPage) {
        end = this.totalPage
        // 因为结束页等于总页数了，比如结束也等于5那么起始页就应该等于总页数减去连续页，但是起始页不能为0，比如连续页等于5，总页数也等于5，所以得加1
        start = this.totalPage - continues + 1 //开始页要从后往前算
      }



      return { start, end }
    }
    ,


  },
  methods: {
    //给父组件传参

  }
}
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;

  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #C81623;
      color: #fff;
    }
  }

  span {
    display: inline-block;
    line-height: 28px;
    font-size: 14px;
    color: gray;
    vertical-align: middle;
  }
}
</style>